<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学知鸟</title>
		<link rel="shortcut icon" href="../../share/img/logo.png">
		<link rel="stylesheet" href="../../share/css/main.css">
		<script src="../../share/js/vue/vue.2.6.12.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.inner1 {
				background-color: rgba(0, 0, 0, 0.5);
				padding: 10px;
			}

			.inner2 {
				background-color: rgba(255, 0, 0, 0.5);
				padding: 10px;
			}

			.inner3 {
				background-color: rgba(0, 255, 0, 0.5);
				padding: 10px;
			}

			.inner4 {
				background-color: rgba(0, 0, 255, 0.5);
				padding: 10px;
			}
		</style>
	</head>
	<body class="p-10">
		<div class="row">
			<div class="col-1">
				<section>
					<h3>概念</h3>
					<ul class="plist">
						<li>基于JS的前端响应式框架。</li>
						<li>MVVM模式。模型与视图分离，Vue自身作为VM引擎提供数据绑定与事件绑定功能。</li>
						<li>响应式。数据变更后，视图自动更新。</li>
					</ul>
				</section>
				<section>
					<h3>组件</h3>
					<ul class="plist">
						<li>组件必须在使用前注册</li>
					</ul>
				</section>
			</div>
			<div class="col-1">
				<section>
					<h3>示例1 - new Vue 指定 el 绑定元素</h3>
					<div id="app1">
						<h3>插值绑定，v-show, v-if</h3>
						<div v-if="show1">v-if: {{message}}</div>
						<div v-show="show2">v-show: {{message}}</div>
						<button @click="toggleShow1">v-if</button>
						<button @click="toggleShow2">v-show</button>
						<h3>v-for</h3>
						<ul>
							<li v-for="(item,index) in foods">{{index}} - {{item}}</li>
						</ul>
						<h3>v-model 双向绑定</h3>
						<input v-model="message" />
						<h3>组件</h3>
						<card title="个人信息" content="姓名, 性别, 籍贯等" foot="提交"></card>
						<card :title="card1.title" :content="card1.content" :foot="card1.foot"></card>
						<card v-bind="card2"></card>
					</div>
				</section>
				<section>
					<h3>示例2 - new Vue 后 $mount 挂载到元素</h3>
					<div id="app2">{{message}}</div>
				</section>
			</div>
			<div class="col-1">
				<section>
					<h3>自定义组件V-Model</h3>
					<div id="app3">
						<search-bar title="查询商品" v-model="kw1"></search-bar>
						<div>
							<span>正在查询 {{kw1}} ...</span>
						</div>
					</div>
				</section>
				<section>
					<h3>组件非prop的attribute</h3>
					<div id="app4">
						<ul>
							<lb-row v-for="item in goods" :name="item.name" @select="onSelect" @remove="onRemove" :data-id="item.id"></lb-row>
						</ul>
					</div>
				</section>
				<section>
					<h3>.sync</h3>
					<div id="app5">
						<div>
							<label>父组件-姓名:</label> {{name}}
						</div>
						<lb-name :name.sync="name"></lb-name>
					</div>
				</section>
				<section>
					<h3>作用域插槽</h3>
					<div id="app6">
						<lb-profile :profile="profile"></lb-profile>
						<br />
						<lb-profile :profile="profile">
							<template v-slot="scope">
								<label>姓名: </label><span>{{scope.profile.fullName}}</span>
								<br />
								<label>简称: </label><span>{{scope.profile.name}}</span>
								<br />
								<label>性别: </label><span>{{scope.profile.sex}}</span>
								<br />
								<label>年龄: </label><span>{{scope.profile.age}}</span>
							</template>
						</lb-profile>
						<br />
						<lb-profile :profile="profile" v-slot="scope">
							{{scope.profile.fullName}}, {{scope.profile.sex}}, {{scope.profile.age}}
						</lb-profile>
						<br />
						<lb-profile :profile="profile" v-slot="{profile}">
							{{profile.fullName}}, {{profile.sex}}, {{profile.age}}
						</lb-profile>
						<br />
						<lb-profile :profile="profile" #default="{profile}">
							{{profile.fullName}}, {{profile.sex}}, {{profile.age}}
						</lb-profile>
					</div>
				</section>
				<section>
					<h3>层级访问</h3>
					<div id="app7" class="inner1">
						<button @click="hi">我的</button><button @click="hiTree">树</button><button @click="hiTrunk">枝</button><button @click="hiLeaf">叶</button>
						<lb-tree ref="tree" class="inner2">
							<lb-trunk ref="trunk" class="inner3">
								<lb-leaf ref="leaf" class="inner4"></lb-leaf>
							</lb-trunk>
						</lb-tree>
					</div>
				</section>
			</div>
		</div>
		<script type="text/javascript">
			var app1, app2, app3, app5;

			function initVue1() {
				Vue.component("card", {
					props: [
						"title",
						"content",
						"foot"
					],
					template: `<div class='card'><header>{{title}}</header><main>{{content}}</main><footer>{{foot}}</footer></div>`
				});
				app1 = new Vue({
					el: "#app1",
					data() {
						return {
							message: "Hello, Vue",
							show1: true,
							show2: true,
							foods: ["apple", "pear", "orange"],
							card1: {
								title: "购物车",
								content: "商品列表",
								foot: "结算"
							},
							card2: {
								title: "订单",
								content: "订单状态、联系人等",
								foot: "待提交"
							}
						};
					},
					methods: {
						toggleShow1() {
							this.show1 = !this.show1;
						},
						toggleShow2() {
							this.show2 = !this.show2;
						}
					}
				});
			}

			function initVue2() {
				app2 = new Vue({
					data() {
						return {
							message: "Hello, Vue"
						};
					}
				});
				app2.$mount("#app2");
			}

			function initVue3() {
				Vue.component("search-bar", {
					props: ["value", "title"],
					template: `<div><span>{{title}}: </span><input :value='value' @input="$emit('input', $event.target.value)"></input><button>查询</button><button @click="clear">清空</button></div>`,
					methods: {
						clear() {
							this.value = "";
							this.$emit("input", this.value);
						}
					}
				});
				app3 = new Vue({
					el: "#app3",
					data() {
						return {
							kw1: "apple"
						};
					}
				});
			}

			function initVue4() {
				var lbRow = {
					props: ["name"],
					template: `<li @click="$emit('select')">{{name}} <button @click.stop="$emit('remove', name)">删除</button></li>`
				};
				var app4 = new Vue({
					el: "#app4",
					data() {
						return {
							goods: [{
									id: 101,
									name: "apple"
								},
								{
									id: 102,
									name: "pear"
								},
								{
									id: 103,
									name: "orange"
								},
							]
						}
					},
					methods: {
						onRemove(name) {
							console.log(name, event.target);
						},
						onSelect() {
							console.log(event.target.dataset);
						}
					},
					components: {
						lbRow
					}
				});
			}

			function initVue5() {
				var lbName = {
					props: ["name"],
					template: `<div><input v-model="name"></input><button @click="onChange">修改</button>{{name}}</div>`,
					methods: {
						onChange() {
							this.name = "tom";
							this.$emit("update:name", this.name);
						}
					}
				};
				app5 = new Vue({
					el: "#app5",
					data() {
						return {
							name: "Ray"
						}
					},
					components: {
						lbName
					}
				});
			}

			function initVue6() {
				var lbProfile = {
					props: ["profile"],
					template: `<div><h4>个人信息</h4><slot :profile="profile">简称: {{profile.name}}</slot></div>`
				}
				var app6 = new Vue({
					el: "#app6",
					data() {
						return {
							profile: {
								name: "Tom",
								fullName: "Tom Riddle",
								age: 30,
								sex: "male"
							}
						}
					},
					components: {
						lbProfile
					}
				});
			}

			function initVue7() {
				var lbTree = {
					data() {
						return {
							name: "tree"
						}
					},
					template: `<div ><button @click="hi">我的</button><button @click="hiRoot">根</button><button @click="hiParent">父级</button><slot /></div>`,
					methods: {
						hi() {
							alert(`i'm ${this.name}!`)
						},
						hiRoot() {
							this.$root.hi();
						},
						hiParent() {
							this.$parent.hi();
						}
					}
				}
				var lbTrunk = {
					data() {
						return {
							name: "trunk"
						}
					},
					template: `<div><button @click="hi">我的</button><button @click="hiRoot">根</button><button @click="hiParent">父级</button><slot /></div>`,
					methods: {
						hi() {
							alert(`i'm ${this.name}!`)
						},
						hiRoot() {
							this.$root.hi();
						},
						hiParent() {
							this.$parent.hi();
						}
					}
				}
				var lbLeaf = {
					data() {
						return {
							name: "leaf"
						}
					},
					template: `<div><button @click="hi">我的</button><button @click="hiRoot">根</button><button @click="hiParent">父级</button></div>`,
					methods: {
						hi() {
							alert(`i'm ${this.name}!`)
						},
						hiRoot() {
							this.$root.hi();
						},
						hiParent() {
							this.$parent.hi();
						}
					}
				}
				var app7 = new Vue({
					el: "#app7",
					data() {
						return {
							name: "root"
						}
					},
					methods: {
						hi() {
							alert(`i'm ${this.name}!`)
						},
						hiTree() {
							this.$refs.tree.hi();
						},
						hiTrunk() {
							this.$refs.trunk.hi();
						},
						hiLeaf() {
							this.$refs.leaf.hi();
						}
					},
					components: {
						lbTree,
						lbTrunk,
						lbLeaf
					}
				});
			}
			initVue1();
			initVue2();
			initVue3();
			initVue4();
			initVue5();
			initVue6();
			initVue7();
		</script>
	</body>
</html>
